<template>
    <div align="center" style="font-size:25px; font-weight: bold"> </div>
      <!-- <div align="center"> -->
     
        <a-input-search
        v-model:value="value"
        placeholder="input search text"
        style="width: 500px ;margin-top: 10px;margin-left: 180px"
        @search="onSearch"
      />
      

      
              <div align="center">
                  <a-list item-layout="vertical" size="large" :pagination="pagination" :data-source="listData"  style="width: 80%">
                    <template #footer>
                      <div>
                        <b>ant design vue</b>
                        footer part
                      </div>
                    </template>
                    <template #renderItem="{ item }">
                      <a-list-item key="item.title">
                        <template #actions>
                          <span v-for="{ type } in actions" :key="type">
                            <component v-bind:is="type" style="margin-right: 8px" />
                            {{ text }}
                          </span>
                        </template>
                        <template #extra>
                          <!-- <img
                            width="272"
                            alt="logo"
                            src="item.avatar"
                          /> -->
                          <img 
                          width="272"
                          :src="item.href" />
                        </template>
                        <a-list-item-meta :description="item.description">
                          <template #title>
                            <a :href="item.href">{{ item.title }}</a>
                          </template>
                          <template #avatar><a-avatar :src="item.href" /></template>
                        </a-list-item-meta>
                        {{ item.content }}
                        <h1>
                          <a-rate v-model:value=" item.grade" disabled allow-half />
                        </h1>
                        
                      </a-list-item>
                    
                     
                    </template>
                   
                  </a-list>
                </div>
       
    
  
  
  
            
                
        
      <!-- </div> -->
   
  
  </template>
  <script>
  import { StarOutlined, LikeOutlined, MessageOutlined } from '@ant-design/icons-vue';
  import { defineComponent,ref } from 'vue';
  const listData = [];
  
  // for (let i = 0; i < 5; i++) {
  //   listData.push({
  //     href: 'https://www.antdv.com/',
  //     title: `ant design vue part ${i}`,
  //     avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
  //     description:
  //       'Ant Design, a design language for background applications, is refined by Ant UED Team.',
  //     content:
  //       'We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.',
  //   });
  // }
  
  
  export default defineComponent({
    components: {
      StarOutlined,
      LikeOutlined,
      MessageOutlined,
    },
  
    setup() {
      const value = ref(2.5);
      const pagination = {
        onChange: page => {
          console.log(page);
        },
        pageSize: 5,
      };
      const actions = [
        {
          type: 'StarOutlined',
          text: '156',
        },
        {
          type: 'LikeOutlined',
          text: '156',
        },
        {
          type: 'MessageOutlined',
          text: '2',
        },
      ];
      return {
        activeKey: ref('1'),
        listData,
        pagination,
        actions,
        value,
          listData: ref([
  
      {href: 'https://storage.djyanbao.com/sys/1/56f72030-fe7f-11eb-9568-6d4c0c07a07d.png',
      title: `区块链双周报 `,
      grade:'5',
      avatar: 'https://storage.djyanbao.com/sys/1/56f72030-fe7f-11eb-9568-6d4c0c07a07d.png',
      description:
        '区块链将如何应用在新闻传播领域',
      content:
        '时间戳和哈希算法等区块链核心技术可以对新闻内容版权进行有效保护。运用时间戳能够给数据区块打上的公开可见的时间烙印，哈希算法则是一种不可逆的算法机制，确保区块链中的交易数据难以被篡改。当区块链应用到新闻传播系统后，新闻内容收集、编写、分发等每一步的信息都会通过哈希算法转换成哈希值，用时间戳和上一步的哈希值进行标记，在区块头中进行',
      },
      {href: 'https://storage.djyanbao.com/sys/8/daf4c7d0-0653-11ec-8371-912f48695b55.png?x-oss-process=image/resize,w_178,h_228',
      title: `区块链新闻报 `,
      grade:'4.5',
      avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
      description:
        '未来区块链如何与新闻传播协同发展',
      content:
        '作家阿瑟·克拉克曾说过：“任何足够先进的技术都等同于魔术。”区块链的应用给新闻传播业带来了前所未有的机遇。未来，在新闻生产、编辑、分发、版权保护等领域都可嵌入相关区块链技术',
      },
       {href: 'https://storage.djyanbao.com/sys/1/56f72030-fe7f-11eb-9568-6d4c0c07a07d.png',
      title: `区块链双周报 `,
      grade:'4',
      avatar: 'https://storage.djyanbao.com/sys/1/56f72030-fe7f-11eb-9568-6d4c0c07a07d.png',
      description:
        '区块链将如何应用在新闻传播领域',
      content:
        '时间戳和哈希算法等区块链核心技术可以对新闻内容版权进行有效保护。运用时间戳能够给数据区块打上的公开可见的时间烙印，哈希算法则是一种不可逆的算法机制，确保区块链中的交易数据难以被篡改。当区块链应用到新闻传播系统后，新闻内容收集、编写、分发等每一步的信息都会通过哈希算法转换成哈希值，用时间戳和上一步的哈希值进行标记，在区块头中进行',
      },
      {href: 'https://storage.djyanbao.com/sys/8/daf4c7d0-0653-11ec-8371-912f48695b55.png?x-oss-process=image/resize,w_178,h_228',
      title: `区块链新闻报 `,
      grade:'3',
      avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
      description:
        '未来区块链如何与新闻传播协同发展',
      content:
        '作家阿瑟·克拉克曾说过：“任何足够先进的技术都等同于魔术。”区块链的应用给新闻传播业带来了前所未有的机遇。未来，在新闻生产、编辑、分发、版权保护等领域都可嵌入相关区块链技术',
      },
  
  
    ]),
  
            listData2: ref([
  
  {href: 'https://storage.djyanbao.com/sys/1/56f72030-fe7f-11eb-9568-6d4c0c07a07d.png',
  title: `区块链双周报 `,
  grade:'4',
  avatar: 'https://storage.djyanbao.com/sys/1/56f72030-fe7f-11eb-9568-6d4c0c07a07d.png',
  description:
    '区块链将如何应用在新闻传播领域',
  content:
    '时间戳和哈希算法等区块链核心技术可以对新闻内容版权进行有效保护。运用时间戳能够给数据区块打上的公开可见的时间烙印，哈希算法则是一种不可逆的算法机制，确保区块链中的交易数据难以被篡改。当区块链应用到新闻传播系统后，新闻内容收集、编写、分发等每一步的信息都会通过哈希算法转换成哈希值，用时间戳和上一步的哈希值进行标记，在区块头中进行',
  },
  {href: 'https://storage.djyanbao.com/sys/8/daf4c7d0-0653-11ec-8371-912f48695b55.png?x-oss-process=image/resize,w_178,h_228',
  title: `区块链新闻报 `,
  grade:'4.5',
  avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
  description:
    '未来区块链如何与新闻传播协同发展',
  content:
    '作家阿瑟·克拉克曾说过：“任何足够先进的技术都等同于魔术。”区块链的应用给新闻传播业带来了前所未有的机遇。未来，在新闻生产、编辑、分发、版权保护等领域都可嵌入相关区块链技术',
  },
   {href: 'https://storage.djyanbao.com/sys/1/56f72030-fe7f-11eb-9568-6d4c0c07a07d.png',
  title: `区块链双周报 `,
  grade:'4',
  avatar: 'https://storage.djyanbao.com/sys/1/56f72030-fe7f-11eb-9568-6d4c0c07a07d.png',
  description:
    '区块链将如何应用在新闻传播领域',
  content:
    '时间戳和哈希算法等区块链核心技术可以对新闻内容版权进行有效保护。运用时间戳能够给数据区块打上的公开可见的时间烙印，哈希算法则是一种不可逆的算法机制，确保区块链中的交易数据难以被篡改。当区块链应用到新闻传播系统后，新闻内容收集、编写、分发等每一步的信息都会通过哈希算法转换成哈希值，用时间戳和上一步的哈希值进行标记，在区块头中进行',
  },
  {href: 'https://storage.djyanbao.com/sys/8/daf4c7d0-0653-11ec-8371-912f48695b55.png?x-oss-process=image/resize,w_178,h_228',
  title: `区块链新闻报 `,
  grade:'3',
  avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
  description:
    '未来区块链如何与新闻传播协同发展',
  content:
    '作家阿瑟·克拉克曾说过：“任何足够先进的技术都等同于魔术。”区块链的应用给新闻传播业带来了前所未有的机遇。未来，在新闻生产、编辑、分发、版权保护等领域都可嵌入相关区块链技术',
  },
  
  
  ]),
      };
    },
  });
  </script>
  <style >
  
  .ant-tabs-nav .ant-tabs-tab {
    font-weight: bold;
      position: relative;
      display: inline-block;
      box-sizing: border-box;
      height: 100%;
      margin: 0 32px 0 0;
      padding: 12px 16px;
      text-decoration: none;
      cursor: pointer;
      transition: color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
      /* align-content: center;
      align-items: center;
      align-self: center; */
  }
  </style>
